<template>
  <div className="chartSize"></div>
</template>

<script>
import resize from "../../../components/echart/mixins/resize";

export default {
  mixins: [resize],
  props: {
    currentData: {
      type: Array,
      default: function () {
        return [];
      }
    },
    title: {
      type: String,
      default: "图标标题"
    },
    initData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    loading: {
      type: Boolean,
      default: false
    },
    chartName: {
      type: String,
      default: "年统计"
    }
  },
  data() {
    return {
      chartData: [],
    };
  },
  computed: {
    option: function () {
      return {
        title: {
          text: '月统计',
          textStyle: {
            color: '#FFFFFF'
          },
          left: 'center',
          top:15
        },
        tooltip: {
          tigger: 'item',
          formatter: "{b}日: {c}条"
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.getEveryDay(),
          axisLine: {
            lineStyle: {
              color: '#FFFFFF'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#FFFFFF'
            }
          }
        },
        grid: {
          bottom:25,
          left: 40
        },
        series: [{
          data: this.chartData,
          type: 'line',
          areaStyle: {}
        }],
        color: ['#0BC3A9']
      };
    },
  },
  methods: {
    /**
     * 更新数据
     */
    updateData: function () {
      let option = {
        series: [
          {
            name: this.legend,
            data: this.chartData,
            type: "line"
          },
        ],
      }
      this.chart.setOption(option);
    },
    /**
     * 获取本月每一天
     * */
    getCountDays() {
      let curDate = new Date();
      let curMonth = curDate.getMonth();
      curDate.setMonth(curMonth + 1);
      curDate.setDate(0);
      return curDate.getDate();
    },
    /**
     * 获取本月每一天
     * */
    getEveryDay() {
      let dayArry = [];
      let day = this.getCountDays();
      for (let k = 1; k <= day; k++) {
        dayArry.push(k);
      }

      return dayArry;
    }
  },
  watch: {

    /**
     * 更新当前值
     * @param val
     */
    currentData: function (val) {
      this.chartData = val;
      this.updateData();
    },

    /**
     * 初始化数据
     * @param val
     */
    initData: function (val) {
      this.chartData = val;
      this.updateData();
    },

    /**
     * 是否进入loading
     * @param val
     */
    loading: function (val) {
      if (val) {
        this.chart.showLoading();
      } else {
        this.chart.hideLoading();
      }
    }
  },
  mounted() {
    this.chartData = this.currentData;
    this.updateData();
  }
}
</script>

<style scoped>
.chartSize {
  height: 100%;
  width: 100%;
}
</style>